<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <form class="form-inline" style="margin-top: 20px;margin-bottom: 10px">
        <button type="button" class="btn btn-default" onclick="addUser()">添加用户</button>
        <button type="button" class="btn btn-default" onclick="searchUser()" style="float: right;">搜索</button>
        <div class="form-group" style="float: right;">
            <input type="text" class="form-control" id="inputSearch" value="" placeholder="输入昵称">
        </div>
    </form>

    <table id="user_table" class="table table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>昵称</th>
            <th>性别</th>
            <th>年龄</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <nav aria-label="Page navigation">
        <ul class="pager">
            <li id="prevPage"><a href="javascript:void(0)" onclick="listUser(-1)" >Previous</a></li>
            <span id="pageText"></span>
            <li id="nextPage"><a href="javascript:void(0)" onclick="listUser(1)">Next</a></li>
        </ul>
    </nav>
</div>

<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="userModalLabel">用户信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="userForm">
                    <div class="form-group">
                        <label for="inputId" class="col-sm-2 control-label">Id</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputId" name="id" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputName" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputName" name="name" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="sex" value="男">男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" value="女">女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputAge" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputAge" name="age" placeholder="请输入年龄">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveUser()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.js"></script>
<script src="js/jquery.serializejson.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/http.js"></script>
<script>
    var size,totalPage,currentPage;

    $(function () {
        listUser(null);
    });

    function listUser(index) {
        var url = "/users";
        if(index != null) {
            currentPage += index;
            if(currentPage < 1 || currentPage > totalPage) {
                return false;
            }
            url += "?page=" + currentPage;
        }

        sendJson("get", url, {}, false, function (res) {
            if (res.status) {
                var tmp = "";

                size = res.data.size;
                totalPage = res.data.pages;
                currentPage = res.data.current;

                var pageStr = "第 " + currentPage + " 页，共 " + totalPage + " 页，每页显示 " + size + " 条";
                if(currentPage >= totalPage) {
                    $("#nextPage").addClass("disabled");
                } else {
                    if($("#nextPage").hasClass("disabled")) {
                        $("#nextPage").removeClass("disabled");
                    }
                }
                if(currentPage <= 1) {
                    $("#prevPage").addClass("disabled");
                } else {
                    if($("#prevPage").hasClass("disabled")) {
                        $("#prevPage").removeClass("disabled");
                    }
                }
                $("#pageText").text(pageStr);

                var data = res.data.records;
                for (var i = 0; i < data.length; i++) {
                    var strId = "\'" + data[i].id + "\'";
                    var text = '<tr><td>' + data[i].id + '</td>\n' +
                        '                    <td>' + data[i].name + '</td>\n' +
                        '                    <td>' + data[i].sex + '</td>\n' +
                        '                    <td>' + data[i].age + '</td>\n' +
                        '                    <td>' + data[i].createDate + '</td>\n' +
                        '                    <td>' + data[i].modifiedDate + '</td>\n' +
                        '                    <td>\n' +
                        '                        <button type="button" class="btn btn-primary btn-sm" onclick="editUser(' + strId + ')">修改</button>\n' +
                        '                        <button type="button" class="btn btn-danger btn-sm" onclick="deleteUser(' + strId + ')">删除</button>\n' +
                        '                    </td></tr>';
                    tmp += text;
                }
                $("#user_table tbody").html(tmp);
            } else {
                alert(res.info);
            }
        }, function (error) {
            alert("发生错误！");
        });
    }

    function addUser() {
        $("#inputId").val("");
        $('#userModal').modal('show');
    }

    function editUser(id) {
        var url = '/users/' + id;
        sendJson("get", url, {}, false, function (res) {
            if (res.status) {
                var user = res.data;
                $("#inputId").val(user.id);
                $("#inputName").val(user.name);
                $("input:radio[name='sex'][value=" + user.sex + "]").attr('checked', 'true');
                $("#inputAge").val(user.age);
                $('#userModal').modal('show');
            } else {
                alert(res.info);
            }
        }, function (error) {
            alert("发生错误！");
        });
    }

    function saveUser() {
        var name = $("#inputName").val();
        if (name == "" || name == null) {
            alert("昵称不能为空！");
            return false;
        }

        // id为null-->新增用户;id非null-->更新用户
        var id = $("#inputId").val();
        var method = "";
        if (id == "" || id == null) {
            method = "post";
        } else {
            method = "put";
        }

        var data = $('#userForm').serializeJSON();
        sendJson(method, "/users", data, false, function (res) {
            if (res.status) {
                $('#userModal').modal('hide');
                window.location.reload();
            } else {
                alert("修改失败！");
            }
        }, function (error) {
            alert("发生错误！");
        });
    }

    function deleteUser(id) {
        var info = "是否要删除该用户？";
        if (confirm(info)) {
            var url = "/users/" + id;
            sendJson("delete", url, {}, false, function (res) {
                if (!res.status) {
                    alert(res.info);
                }
                window.location.reload();
            }, function (error) {
                alert("发生错误！");
            });
        }
    }

    function searchUser() {
        var name = $("#inputSearch").val();
        if(name == "" || name == null) {
            listUser(null);
        } else {
            var url = "/users/name/" + name;
            sendJson("get", url, {}, false, function (res) {
                if (res.status) {
                    var tmp = "";
                    for (var i = 0; i < res.data.length; i++) {
                        var strId = "\'" + res.data[i].id + "\'";
                        var text = '<tr><td>' + res.data[i].id + '</td>\n' +
                            '                    <td>' + res.data[i].name + '</td>\n' +
                            '                    <td>' + res.data[i].sex + '</td>\n' +
                            '                    <td>' + res.data[i].age + '</td>\n' +
                            '                    <td>\n' +
                            '                        <button type="button" class="btn btn-primary btn-sm" onclick="editUser(' + strId + ')">修改</button>\n' +
                            '                        <button type="button" class="btn btn-danger btn-sm" onclick="deleteUser(' + strId + ')">删除</button>\n' +
                            '                    </td></tr>';
                        tmp += text;
                    }
                    $("#user_table tbody").html(tmp);
                }
            }, function (error) {
                alert("发生错误！");
            });
        }
    }
</script>
</body>
</html>